<!--
* 开源版本请务必保留此注释头信息，若删除捷码开源〔GEMOS〕官方保留所有法律责任追究！
* 本软件受国家版权局知识产权以及国家计算机软件著作权保护（登记号：2018SR503328）
* 不得恶意分享产品源代码、二次转售等，违者必究。
* Copyright (c) 2020 gemframework all rights reserved.
* http://www.gemframework.com
* 版权所有，侵权必究！
-->
<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="common/links :: common_header(~{::title},~{::style},~{})">
    <title>权限管理</title>
    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!--表格工具栏-->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">权限名称:</label>
                        <div class="layui-input-inline">
                            <input name="name" class="layui-input" placeholder="输入权限名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">权限标识:</label>
                        <div class="layui-input-inline">
                            <input name="flags" class="layui-input" placeholder="输入权限标识"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">显示状态:</label>
                        <div class="layui-input-inline">
                            <select name="status" onchange="doTbSearch({status:this.value},'id');" lay-submit>
                                <option value="">全部显示</option>
                                <option value="0">显示</option>
                                <option value="1">隐藏</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="searchBtn" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>&nbsp;
                    </div>
                    <div class="layui-inline">
                        <button shiro:hasPermission="right:save" id="addBtn" class="layui-btn icon-btn" type="button">
                            <i class="layui-icon">&#xe654;</i>添加
                        </button>
                    </div>
                    <div class="layui-inline">
                        <button id="expandAllBtn" class="layui-btn icon-btn" type="button">
                            <i class="layui-icon">&#xe622;</i>展开所有
                        </button>
                    </div>
                    <div class="layui-inline">
                        <button id="foldAllBtn" class="layui-btn icon-btn" type="button">
                            <i class="layui-icon">&#xe758;</i>关闭所有
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="dataTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBarAuth">
    <a shiro:hasPermission="right:update" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="position">布局</a>
    <a shiro:hasPermission="right:update" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a shiro:hasPermission="right:delete" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a shiro:hasPermission="right:addchild" class="layui-btn layui-btn-xs" lay-event="addChild">添加子节点</a>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="modelAuth">
    <form id="dataForm" lay-filter="dataForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <input name="level" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">所属上级</label>
            <div class="layui-input-block">
                <div id="selectTree" class="ew-xmselect-tree"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">权限名称</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入权限名称" type="text" class="layui-input" maxlength="50"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">权限类型</label>
                <div class="layui-input-block">
                    <input name="type" type="radio" lay-filter="rightType" value="0" title="菜单" checked/>
                    <input name="type" type="radio" lay-filter="rightType" value="1" title="按钮"/>
                    <input name="type" type="radio" lay-filter="rightType" value="2" title="权限"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-col-md12 menuDiv">
            <div class="layui-col-md6">
                <label class="layui-form-label">
                    菜单URL
                </label>
                <div class="layui-input-block">
                    <input name="link" placeholder="请输入URL，外部链接请加HTTP://" type="text" class="layui-input"/>
                </div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <input type="text" id="iconPicker" name="icon" value="layui-icon layui-icon-circle-dot" placeholder="请输入菜单图标"  lay-filter="iconPicker" class="hide">
                </div>
            </div>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <div class="layui-col-md6 hideDiv">-->
        <!--                <label class="layui-form-label">菜单位置</label>-->
        <!--                <div class="layui-input-block">-->
        <!--                    <select name="position" lay-search>-->
        <!--                        <option value="0" selected>基础功能</option>-->
        <!--                        <option value="1">企业办公</option>-->
        <!--                        <option value="2">扩展组件</option>-->
        <!--                    </select>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item rightDiv" style="display: none">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-block">
                <input name="flags" placeholder="请输入权限标识,多个以“，”隔开" type="text" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">排序序号</label>
            <div class="layui-input-block">
                <input name="sortNumber" placeholder="请输入排序号" type="number" class="layui-input" min="0" max="1000"
                       lay-verType="tips" lay-verify="required|number" required value="99"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <input name="remark" placeholder="备注信息" type="text" class="layui-input" lay-verType="tips"/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="saveBtn" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="modelPosition">
    <form id="positionForm" lay-filter="positionForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">权限名称</label>
            <div class="layui-input-block">
                <input name="name" type="text" class="layui-input" disabled="disabled"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单位置</label>
            <div class="layui-input-block">
                <select name="position" lay-search>
                    <option value="0" selected>基础功能</option>
                    <option value="1">企业办公</option>
                    <option value="2">扩展组件</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="resetPositionBtn" lay-submit>修改</button>
        </div>
    </form>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="rightStatus">
    <input type="checkbox" lay-filter="statusBtn" value="{{d.id}}" lay-skin="switch"
           lay-text="显示|隐藏" {{d.status==0?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.status==0?'显示':'隐藏'}}</p>
</script>
<!-- js部分 -->
<div th:replace="common/scripts :: common"></div>
<div th:replace="common/scripts :: jquery"></div>
<script th:inline="javascript">
    layui.use(['layer', 'form', 'admin', 'treeTable',  'xmSelect','iconPicker'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var treeTable = layui.treeTable;
        var xmSelect = layui.xmSelect;
        var iconPicker = layui.iconPicker;
        var tbDataList = [{}];


        // 渲染表格
        var insTb = treeTable.render({
            elem: '#dataTable',
            tree: {
                iconIndex: 2,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义id字段的名称
                pidName: 'pid',  // 自定义标识是否还有子节点的字段名称
                isPidData: true,  // 是否是pid形式数据
            },

            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            // cellMinWidth: 100,
            // height: "full-110",
            cols: [
                // {type: 'numbers'},
                {field: 'sortNumber', title: '排序', align: 'center', width:60},
                {field: 'position', title: '所属模块', width: 100, templet: function (d) {
                        if(d.position === 0){
                            return "基础功能"
                        }else if(d.position === 1){
                            return "企业办公"
                        }else if(d.position === 2){
                            return "扩展组件"
                        }else{
                            return "扩展组件"
                        }
                    }},
                {field: 'name', title: '权限名称', width: 200},
                {field: 'icon', title: '图标', templet: '<p><i class="{{d.icon}}"></i></p>', align: 'center', width: 80},
                {
                    title: '菜单URL', templet: function (d) {
                        if(!d.link){
                            return "暂无数据"
                        }else{
                            return d.link;
                        }
                    }
                },
                {
                    title: '标识组', templet: function (d) {
                        if(!d.flags){
                            return "暂无数据"
                        }else{
                            return d.flags;
                        }
                    }
                },
                {field: 'status', title: '显示状态', templet: '#rightStatus', sort: true, width: 100},
                {
                    title: '类型', templet: function (d) {
                        var strs = [
                            '<span class="layui-badge layui-badge-green">菜单</span>',
                            '<span class="layui-badge layui-badge-blue">按钮</span>',
                            '<span class="layui-badge layui-badge-yellow">权限</span>'
                        ];
                        return strs[d.type];
                    }, align: 'center', width: 80
                },
                {templet: '#tableBarAuth', title: '操作', align: 'center', width: 260}
            ],
            reqData: function (data, callback) {
                $.get('right/list', function (res) {
                    tbDataList = res.data ? res.data : [];
                    callback(res.data);
                    insTb.foldAll();
                });
            }
        });

        /* 表格搜索 */
        form.on('submit(searchBtn)', function (data) {
            doTbSearch(data.field, 'id');
            return false;
        });

        // 添加按钮点击事件
        $('#addBtn').click(function () {
            showEditModel();
        });
        // 展开所有
        $('#expandAllBtn').click(function () {
            insTb.expandAll();
        });
        // 关闭所有
        $('#foldAllBtn').click(function () {
            insTb.foldAll();
        });

        // 工具条点击事件
        treeTable.on('tool(dataTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDel(data);
            } else if (layEvent === 'position') { // 布局修改
                doPosition(data);
            } else if (layEvent === 'addChild') { // 添加子节点
                //只把自己的ID设置成PID传过去
                var parentData = {};
                parentData.pid = data.id;
                parentData.position = data.position;
                showEditModel(parentData);
            }
        });

        /* 修改菜单状态 */
        form.on('switch(statusBtn)', function (obj) {
            var loadIndex = layer.load(2);
            $.post('right/status', {
                id: obj.elem.value,
                status: obj.elem.checked ? 0 : 1
            }, function (res) {
                layer.close(loadIndex);
                if (res.code === 0) {
                    layer.msg(res.msg, {icon: 1});
                } else {
                    layer.msg(res.msg, {icon: 2});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'json');
        });

        // 显示表单弹窗
        function showEditModel(mData) {
            admin.open({
                type: 1,
                area: '800px',
                title: (mData && mData.id ? '修改' : (mData && mData.pid?'添加子节点':'添加')) + '权限',
                content: $('#modelAuth').html(),
                shadeClose:true,
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('dataForm', mData);

                    // 回显时渲染菜单和按钮的显示
                    showRightView(mData?(mData.type?mData.type:0):0);
                    // 添加菜单选择点击事件
                    form.on("radio(rightType)", function (data) {
                        showRightView(data.value);
                    });

                    //渲染图标选择
                    iconPicker.render({
                        // 选择器，推荐使用input
                        elem: '#iconPicker',
                        // 数据类型：fontClass/unicode，推荐使用fontClass
                        type: 'fontClass',
                        // 是否开启搜索：true/false，默认true
                        search: true,
                        // 是否开启分页：true/false，默认true
                        page: true,
                        // 每页显示数量，默认12
                        limit: 12,
                        // 点击回调
                        click: function (data) {
                            $('#iconPicker').val("layui-icon "+data.icon)
                        },
                        // 渲染成功后的回调
                        success: function(d) {
                            console.log("d="+d);
                        }
                    });

                    // 渲染下拉树
                    var optionsData = insTb.options.data;
                    optionsData.unshift({
                        name: '最顶层',
                        value: '0'
                    })
                    var insXmSel = xmSelect.render({
                        el: '#selectTree',
                        height: '250px',
                        // data: insTb.options.data,
                        data: optionsData,
                        filterable: true,
                        initValue: mData ? [mData.pid] : [0],
                        model: {label: {type: 'text'}},
                        prop: {
                            name: 'name',
                            value: 'id'
                        },
                        radio: true,
                        clickClose: true,
                        tree: {
                            show: true,
                            indent: 15,
                            strict: false,
                            expandedKeys: true
                        }
                    });

                    if(mData){
                        if ([[${session.session_runtime}]] == 'demo') return layer.msg('演示环境不允许操作，请联系管理员', {icon: 4});
                    }
                    // 表单提交事件
                    form.on('submit(saveBtn)', function (data) {
                        data.field.pid = insXmSel.getValue('valueStr') == ""?"0":insXmSel.getValue('valueStr');
                        var loadIndex = layer.load(2);
                        $.ajaxSettings.async = false;
                        $.get('right/info', {id:data.field.pid}, function (res) {
                            if (res.code === 0) {
                                data.field.level = (res.data.level==null?0:res.data.level) + 1;
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        })
                        $.ajaxSettings.async = true;
                        $.post(mData && mData.id ?'right/update':'right/save', data.field, function (res) {
                            layer.close(loadIndex);
                            if (res.code === 0) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.refresh();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });
                    // 弹窗不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        // 修改布局
        window.doPosition = function(mData){
            if ([[${session.session_runtime}]] == 'demo') return layer.msg('演示环境不允许操作，请联系管理员', {icon: 4});
            layer.confirm('【重要提示】确定要移动“' + mData.name + '”吗？子节点也会全部被移动请慎重操作！', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (index) {
                layer.close(index);
                admin.open({
                    type: 1,
                    area:  ['800px', '300px'],
                    title: "修改位置",
                    content: $('#modelPosition').html(),
                    success: function (layero, dIndex) {
                        // 回显表单数据
                        form.val('positionForm', mData);
                        // 表单提交事件
                        form.on('submit(resetPositionBtn)', function (data) {
                            var loadIndex = layer.load(2);
                            $.post('right/resetPosition', {
                                id: data.field.id,
                                position:data.field.position,
                            }, function (res) {
                                layer.closeAll('loading');
                                if (res.code == 0) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    insTb.refresh();
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'json');
                            return false;
                        });
                    }
                })
            });
        }

        /* 搜索表格数据 */
        // function doTbSearch(field, idName) {
        window.doTbSearch = function(field, idName){
            var ids = [], isClear = true, queryStatus = false;
            for (var i = 0; i < tbDataList.length; i++) {
                var item = tbDataList[i], flag = true;
                for (var f in field) {
                    if (!field.hasOwnProperty(f)) continue;
                    if (!field[f]) continue;
                    isClear = false;
                    var dataItem = item[f];
                    var targetItem = field[f];
                    if(!(typeof dataItem === 'number' && !isNaN(dataItem)) && !dataItem){
                        flag = false;
                        break;
                    }else{
                        if(f == "status"){
                            queryStatus = true;
                        }
                        //如果是数值
                        if(typeof dataItem === 'number' && !isNaN(dataItem)){
                            if (dataItem != targetItem) {
                                flag = false;
                                break;
                            }
                        }else{
                            if (dataItem.indexOf(targetItem) === -1) {
                                flag = false;
                                break;
                            }
                        }
                    }
                }
                if (flag) ids.push(item[idName]);
            }
            if (isClear) {
                insTb.clearFilter();
                queryStatus = false;
            } else {
                insTb.filterData(ids);
                if(queryStatus){
                    insTb.foldAll();
                }
            }
        }

        // 删除
        window.doDel = function(data){
            if ([[${session.session_runtime}]] == 'demo') return layer.msg('演示环境不允许操作，请联系管理员', {icon: 4});
            layer.confirm('【慎重操作】确定要删除“' + data.name + '”吗？子节点也会全部被删除请慎重操作！', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (index) {
                layer.close(index);
                layer.load(2);
                $.post('right/delete', {
                    id: data.id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.refresh();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
    });

    function showRightView(type) {
        //菜单
        $(".hideDiv").hide();
        if(type == 0){
            $(".rightDiv").hide();
            $(".menuDiv").show();
        }else{
            $(".menuDiv").hide();
            $(".rightDiv").show();
        }
    }
</script>
</body>
</html>